<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0:
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: pink;
				position: relative;
				/* 绝对定位 */
				/* left左,right右,top上,bottom下 */
				left: 100px;
				/* bottom: 100px;
				top: 200px;
				right: 100px; */
			}
			/* .nbox{
				width: 300px;
				height: 300px;
				background-color: aqua;
				position: relative;
				top: 400px;
				right: 300px;
				left: 300px; */
				/* 1.绝对定位的元素移动时的参照点是祖先元素的位置
				2.如果没有祖先元素或祖先元素没有定位,则以浏览器为主
				3.如果祖先元素有定位(相对,绝对,固定),则以最近一级有定位元素作为参照点 
				
				*/
			/* } */
			.bigbox{
				width: 600px;
				height: 500px;
				border: 1px solid ;
				background-color: black;
			}
			.fbox{
				width: 400px;
				height: 300px;
				background-color:pink ;
				
			}
			.rbox{
				width: 200px;
				height: 100px;
				background-color:aqua;
			}
			.fixed{
				width: 50px;
				height: 200px;
				border: 1px solid #FF0000;
				/* 固定定位fixed */
				position: fixed;
				right: 0;
				top:300px;
			}
		</style>
	</head>
	<body>
		<!-- <div class="box"></div>
		<div class="nbox"></div> -->
		<div>
		<div class="bigbox">
		<div class="fbox">
		<div class="rbox">
		</div>
		<div class="fixed"></div>
	</body>
</html>
